@import 'normalize.scss';
@import '../lib/swiper/swiper.min.scss';
@import 'base.scss';
html,
body {
    height: 100%; // width: 100%;
}

.waimai-container {
    overflow: hidden;
}

.loading {
    background-color: #ffece9;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 4;
    .bear {
        @include bg('../image/loading/rider1_.png');
        @include wh(154, 121);
        top: (233/32)*1rem;
        right: (108/32)*1rem;
    }
    .progress {
        @include bg('../image/loading/loading-txt.png');
        @include wh(416, 20);
        top: (360/32)*1rem;
        border: 2px solid #373838;
        background-color: #fc2e4d;
        left: 50%;
        margin-left: (-416/32/2)*1rem;
    }
    .text {
        @include bgc('../image/loading/loading-txt.png', 220);
        @include wh(220, 28);
        top: (233+121+40)/32*1rem;
    }
    .logo {
        @include bgc('../image/loading/waimai-logo.png', 162);
        @include wh(162, 39);
        bottom: (118/32)*1rem;
    }
    .copyright {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: (73/32)*1rem;
        color: #e0979d;
    }
}

.garden {
    position: absolute;
    background-color: deepskyblue;
    width: 100%;
    height: 100%;
    z-index: 3;
    .info {
        @include wh(397, 224);
        position: absolute;
        left: 50%;
        margin-left: (-397/32/2)*1rem;
        top: (42/32)*1em;
        .title {
            width: 100%;
            height: 100%;
            position: absolute;
            background: url('../image/page1/theme-title.png') no-repeat center/ 100% 100%;
        }
        .hello {
            @include wh(36,
            36);
            position: absolute;
            right: (8/32)*1em;
            top: (20/32)*1em;
            background: url('../image/page1/hello.png') no-repeat center/ 100% 100%;
        }
    }
    .cloud {
        @include wh(640,
        673);
        position: absolute;
        bottom: 0;
        background: url('../image/page1/clouds.png') no-repeat center / 100% 100%;
    }
    .tree {
        @include wh(599,
        71);
        @include bgc('../image/page1/trees.png',
        599);
        bottom: (352/32)*1em;
    }
    .bear-home {
        @include wh(167,
        279);
        position: absolute;
        bottom: (346/32)*1em;
        left: 50%;
        margin-left: (-167/2/32)*1rem;
        z-index: 5;
        .bear {
            @include bg('../image/page1/rider2.png');
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .smoke {
            @include wh(167,
            32);
            position: absolute;
            bottom: 0;
            background: url('../image/page1/jet1.png') no-repeat center / 100% 100%;
        }
    }
    .glass1 {
        @include wh(647,
        396);
        width: (640/32)*1em;
        height: (396/32)*1em;
        position: absolute;
        bottom: 0;
        background: url('../image/page1/grass1.png') no-repeat center / 100% 100%;
    }
    .glass2 {
        width: (640/32)*1em;
        height: (396/32)*1em;
        position: absolute;
        bottom: 0;
        background: url('../image/page1/grass2.png') no-repeat center / 100% 100%;
    }
    .button {
        width: (208/32)*1em;
        height: (208/32)*1em;
        position: absolute;
        left: 50%;
        margin-left: (-208/32/2)*1rem;
        bottom: (86/32)*1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../image/page1/circle1.png') no-repeat center / 100% 100%;
    }
    .circle2 {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background: url('../image/page1/circle2.png') no-repeat center / 100% 100%;
    }
    .start {
        width: (123/32)*1em;
        height: (113/32)*1em;
        background: url('../image/page1/bear-btn-aft.png') no-repeat center / 100% 100%;
    }
}

.waimai-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
}

.page1 {
    background-color: #be8651;
    .title {
        padding-left: pt(20);
        position: absolute;
        left: pt(32);
        top: pt(32);
        z-index: 5;
        h3 {
            font-size: pt(64);
            color: white;
        }
        p {
            font-size: pt(24);
            padding-top: pt(12);
            color: white;
        }
        div {
            width: pt(5);
            background-color: #fff;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .scroll-page {
        .bg {
            @include bgc ('../image/page2/bg1.png',
            576);
            @include wh(576,
            573);
        }
        .person {
            @include bgc('../image/page2/front1.png',
            439);
            @include wh(439,
            349);
            z-index: 3;
            bottom: pt(290);
            .file {
                position: absolute;
                bottom: pt(104);
                left: pt(27);
                @include wh(85,
                50);
                background-image: url('../image/page2/papers.png');
                background-position: bottom, right;
                background-size: pt(115) pt(114);
                background-repeat: no-repeat;
            }
            .paper1 {
                position: absolute;
                bottom: pt(45);
                left: pt(-70);
                @include wh(86,
                26);
                background-image: url('../image/page2/papers.png');
                background-position: pt(0), pt(-32);
                background-size: pt(115) pt(114);
            }
            .paper2 {
                position: absolute;
                bottom: pt(80);
                right: 0;
                @include wh(64,
                20);
                background-image: url('../image/page2/papers.png');
                background-position: pt(-45), pt(0);
                background-size: pt(115) pt(114);
            }
        }
        .info {
            position: absolute;
            bottom: pt(140);
            left: pt(140);
            z-index: 1;
            @include wh(363,
            119);
            display: flex;
            justify-content: center;
            align-items: center;
            @include bgc('../image/page2/txt-bubbl.png',
            363);
            .text {
                @include wh(220,
                30);
                @include bgc('../image/page2/txt-work.png',
                220)
            }
        }
        .sprere {
            @include bg('../image/page2/sphere1.png');
            bottom: 0;
            @include wh(640,
            356);
        }
        .bear {
            @include bg('../image/page2/bear1.png');
            bottom: pt(0);
            right: pt(38);
            @include wh(178,
            134);
        }
    }
    .scroll-page2 {
        .bg {
            @include bgc ('../image/page2/bg2.png',
            582);
            @include wh(582,
            520);
            bottom: pt(252);
        }
        .person {
            @include bgc('../image/page2/relax.png',
            439);
            @include wh(436,
            332);
            bottom: pt(270);
            .leg1 {
                @include bg('../image/page2/leg1.png');
                left: pt(195);
                bottom: pt(110);
                @include wh(113,
                24)
            }
            .leg2 {
                @include bg('../image/page2/leg2.png');
                left: pt(193);
                bottom: pt(120);
                @include wh(85,
                71)
            }
        }
        .info {
            position: absolute;
            bottom: pt(140);
            left: pt(140);
            @include wh(363,
            119);
            display: flex;
            justify-content: center;
            align-items: center;
            @include bgc('../image/page2/txt-bubbl.png',
            363);
            .text {
                @include wh(224,
                31);
                @include bgc('../image/page2/txt-life.png',
                224)
            }
        }
    }
    .scroll-page3 {
        .bg {
            @include bgc ('../image/page2/bg3.png',
            561);
            @include wh(561,
            516);
            bottom: 9.4375rem;
            background-size: pt(561) pt(516);
        }
        .person {
            @include bgc('../image/page2/person.png',
            439);
            @include wh(503,
            229);
            bottom: pt(300);
            .word1 {
                @include wh(92,
                83);
                @include bg('../image/page2/word1.png');
                bottom: pt(194);
                left: pt(7);
            }
            .word2 {
                @include wh(77,
                70);
                @include bg('../image/page2/word2.png');
                bottom: pt(245);
                left: pt(115);
            }
            .word3 {
                @include wh(115,
                104);
                @include bg('../image/page2/word3.png');
                bottom: pt(220);
                right: pt(130);
            }
            .word4 {
                @include wh(79,
                73);
                @include bg('../image/page2/word4.png');
                bottom: pt(230);
                right: pt(12);
            }
        }
        .info {
            position: absolute;
            bottom: pt(140);
            left: pt(140);
            @include wh(363,
            119);
            display: flex;
            justify-content: center;
            align-items: center;
            @include bgc('../image/page2/txt-bubbl.png',
            363);
            .text {
                @include wh(224,
                31);
                @include bgc('../image/page2/txt-res.png',
                224)
            }
        }
    }
}

.page2 {
    background-color: #ee4143;
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .bg {
        @include bgc('../image/page3/bg4_.png',
        592);
        bottom: pt(330);
        @include wh(592,
        490);
    }
    .bear {
        background-image: url('../image//page3/bear2.png');
        background-position: pt(-103) pt(-96);
        background-size: pt(368) pt(427);
        background-repeat: no-repeat;
        @include wh(227,
        336);
        bottom: pt(310);
        position: absolute;
        left: 50%;
        margin-left: (-227/2/32)*1rem;
        .left {
            @include bg('../image/page3/hand-left_.png');
            @include wh(74,
            77);
            top: pt(180);
            left: pt(30);
        }
        .right {
            @include bg('../image/page3/hand-right.png');
            @include wh(74,
            77);
            top: pt(180);
            right: pt(30);
        }
        .cloud1 {
            @include bg('../image/page3/face1.png');
            top: 0;
            left: pt(-102);
            @include wh(102,
            102);
        }
        .cloud2 {
            position: absolute;
            top: pt(-102);
            right: pt(-101/2);
            @include wh(101,
            102);
            @include bg('../image/page3/face2.png');
        }
    }
    .table {
        @include bgc('../image/page3/table.png',
        514);
        @include wh(514,
        258);
        bottom: pt(140);
        z-index: 4;
        .food {
            @include bgc('../image/page3/foods.png',
            354);
            @include wh(354,
            152);
            bottom: pt(190);
        }
    }
    .sprere {
        @include bg('../image/page3/sphere2.png');
        @include wh(640,
        356);
        bottom: 0;
    }
}

.page3 {
    background-color: #dd8a03;
    .bg {
        @include bgc('../image/page4/bg5.png',
        592);
        @include wh(592,
        580);
        bottom: pt(300);
    }
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .oil {
        @include bg('../image/page4/oil.png');
        bottom: pt(660);
        left: pt(225);
        @include wh(205,
        107)
    }
    .evil {
        @include bg('../image/page4/evil2.png');
        bottom: pt(480);
        right: pt(30);
        @include wh(198,
        163)
    }
    .license {
        @include bg('../image/page4/license.png');
        bottom: pt(500);
        left: pt(40);
        @include wh(197,
        140)
    }
    .bear {
        @include bgc('../image/page4/bear3.png',
        206);
        bottom: pt(195);
        @include wh(206,
        321);
        z-index: 4;
    }
    .sprere {
        @include bg('../image/page4/sphere3.png');
        @include wh(640,
        356);
        bottom: 0;
    }
}

.page4 {
    background-color: #3fa100;
    .bg {
        @include bgc('../image/page5/bg6.png',
        588);
        @include wh(588,
        333);
        bottom: pt(300);
    }
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .card1 {
        @include bg('../image/page5/card1.png');
        @include wh(160,
        175);
        left: pt(32);
        bottom: pt(435);
    }
    .card2 {
        @include bg('../image/page5/card2.png');
        @include wh(161,
        209);
        left: pt(240);
        bottom: pt(530);
    }
    .card3 {
        @include bg('../image/page5/card3.png');
        @include wh(167,
        184);
        right: pt(45);
        bottom: pt(420);
    }
    .bear {
        @include bgc('../image/page5/bear4.png',
        309);
        bottom: pt(120);
        @include wh(309,
        325);
        z-index: 4;
    }
    .sprere {
        @include bg('../image/page5/sphere4.png');
        @include wh(640,
        356);
        bottom: 0;
    }
}

.page5 {
    background-color: #0098cf;
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .bg {
        @include bgc('../image/page6/bg7.png',
        432);
        @include wh(594,
        493);
        bottom: pt(300);
    }
    .cloud {
        @include wh(432,
        160);
        @include bgc('../image/page6/weather-cloud.png',
        432);
        bottom: pt(630);
    }
    .bear {
        @include wh(230,
        390);
        @include bgc('../image/page6/rider2.png',
        230);
        bottom: pt(175);
        z-index: 4;
        .shadow {
            @include wh(114,
            26);
            @include bgc('../image/page6/shadow.png',
            114);
            bottom: 0;
        }
    }
    .sprere {
        @include bg('../image/page6/sphere5.png');
        @include wh(640,
        356);
        bottom: 0;
    }
}

.page6 {
    background-color: #b527a0;
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .bg {
        @include bgc('../image/page7/bg8.png',
        588);
        @include wh(588,
        333);
        bottom: pt(300);
    }
    .bear {
        @include bgc('../image/page7/bear5.png',
        285);
        @include wh(285,
        328);
        bottom: pt(200);
        z-index: 4;
            .gift-box {
                left: 50%;
                top: 0;
                position: absolute;
              >div:nth-child(1) >div{
                    @include bgc('../image/page7/gift1.png',
                    35);
                    @include wh(35,
                    29);
                   
                    top: pt(20);
                }
              >div:nth-child(2) >div{
                    @include bgc('../image/page7/gift2.png',
                    93);
                    @include wh(93,
                    79);
                    
                }
              >div:nth-child(3) >div{
                    @include bgc('../image/page7/gift3.png',
                    72);
                    @include wh(72,
                    64);
                   
                }
              >div:nth-child(4) >div{
                    @include bgc('../image/page7/gift4.png',
                    91);
                    @include wh(91,
                    73);
                 
                }
              >div:nth-child(5) >div{
                    @include bgc('../image/page7/gift5.png',
                    99);
                    @include wh(99,
                    65);
         
                }
              >div:nth-child(6) >div{
                    @include bgc('../image/page7/gift6.png',
                    107);
                    @include wh(107,
                    80);
            
                }
              >div:nth-child(7) >div{
                    @include bgc('../image/page7/gift7.png',
                    107);
                    @include wh(107,
                    80);
                  
                }
              >div:nth-child(8) >div{
                    @include bgc('../image/page7/gift8.png',
                    88);
                    @include wh(88,
                    64);
                   
                }
              >div:nth-child(9) >div{
                    @include bgc('../image/page7/gift9.png',
                    78);
                    @include wh(78,
                    50);
                 
                }
              >div:nth-child(10)>div {
                    @include bgc('../image/page7/gift10.png',
                    49);
                    @include wh(49,
                    37);
                   
                }
              >div:nth-child(11)>div {
                    @include bgc('../image/page7/gift11.png',
                    51);
                    @include wh(51,
                    31);
                  
                }
              >div:nth-child(12)>div {
                    @include bgc('../image/page7/gift12.png',
                    37);
                    @include wh(37,
                    23);
                   
                }
            
           >div:nth-child(1) {
             
                transform: rotate(28deg) translateY(pt(240));
                top: pt(20);
            }
           >div:nth-child(2) {
                
                transform: rotate(28*2deg) translateY(pt(240))
            }
           >div:nth-child(3) {
               
                transform: rotate(28*3deg) translateY(pt(240))
            }
           >div:nth-child(4) {
              
                transform: rotate(28*4deg) translateY(pt(240))
            }
           >div:nth-child(5) {
              
                transform: rotate(28*5deg) translateY(pt(240))
            }
           >div:nth-child(6) {
                
                transform: rotate(28*6deg) translateY(pt(240))
            }
           >div:nth-child(7) {
               
                transform: rotate(28*7deg) translateY(pt(240))
            }
           >div:nth-child(8) {
              
                transform: rotate(28*8deg) translateY(pt(240))
            }
           >div:nth-child(9) {
              
                transform: rotate(28*9deg) translateY(pt(240))
            }
           >div:nth-child(10) {
           
                transform: rotate(28*10deg) translateY(pt(240))
            }
           >div:nth-child(11) {
             
                transform: rotate(28*11deg) translateY(pt(240))
            }
           >div:nth-child(12) {
            
                transform: rotate(28*12deg) translateY(pt(240))
            }
        }
    }
    .sprere {
        @include bg('../image/page7/sphere6.png');
        @include wh(640,
        356);
        bottom: 0;
    }
}

.page7 {
    background-color: #19072a;
    .title {
        position: absolute;
        left: pt(32);
        top: pt(28);
        padding-left: pt(20);
        h3 {
            font-size: pt(64);
            color: white;
            padding-bottom: pt(12);
        }
        p {
            font-size: pt(24);
            color: white;
        }
        div {
            position: absolute;
            height: 100%;
            background-color: white;
            width: pt(5);
            top: 0;
            left: 0;
        }
    }
    .streetlight {
        @include wh(80,
        443);
        @include bg('../image/page8/streetlight.png');
        left: pt(240);
        bottom: pt(300);
        .lamplight {
            @include wh(437,
            427);
            @include bg('../image/page8/lamplight.png');
            top: pt(10);
            left: pt(-140);
        }
    }
    .bear {
        @include wh(276,
        271);
        @include bg('../image/page8/bear6.png');
        left: 50%;
        bottom: pt(280);
        z-index: 4;
    }
    .car {
        @include bg('../image/page8/moto.png');
        @include wh(200,
        137);
        left: pt(125);
        bottom: pt(335);
    }
    .share {
        @include bgc('../image/page8/share.png',
        379);
        @include wh(379,
        113);
        bottom: pt(140);
        z-index: 4;
    }
    .text {
        bottom: pt(70);
        text-align: center;
        position: absolute;
        left: 50%;
        z-index: 4;
        transform: translateX(-50%);
        div {
            font-size: pt(24);
            color: #b579d6;
        }
    }
    .sprere {
        @include bg('../image/page8/sphere7.png');
        @include wh(640,
        384);
        bottom: 0;
        position: absolute;
    }
}

@keyframes step {
    from {}
    to {
        width: 100%;
    }
}

@keyframes bear {
    10% {
        transform: translateX(pt(-26*1)) translateY(pt(-10))
    }
    20% {
        transform: translateX(pt(-26*2)) translateY(pt(10))
    }
    30% {
        transform: translateX(pt(-26*3)) translateY(pt(-10))
    }
    40% {
        transform: translateX(pt(-26*4)) translateY(pt(10))
    }
    50% {
        transform: translateX(pt(-26*5)) translateY(pt(-10))
    }
    60% {
        transform: translateX(pt(-26*6)) translateY(pt(10))
    }
    70% {
        transform: translateX(pt(-26*7)) translateY(pt(-10))
    }
    80% {
        transform: translateX(pt(-26*8)) translateY(pt(10))
    }
    90% {
        transform: translateX(pt(-26*9)) translateY(pt(-10))
    }
    100% {
        transform: translateX(pt(-26*10)) translateY(pt(10))
    }
}

.loading {
    .progress {
        background-color: transparent;
        .step {
            height: 100%;
            width: 20%;
            position: absolute;
            right: 0;
            background-color: #ff2947;
        }
    }
}

.loading.animate {
    .step {
        animation: step 1s linear forwards;
    }
    .bear {
        animation: bear 1s linear forwards;
    }
}

@keyframes glass1 {
    to {
        height: pt(396);
    }
}

@keyframes glass2 {
    from {
        transform: scale(2, 1);
    }
    to {
        opacity: 1;
    }
}

@keyframes tree {
    from {
        transform: translateY(-200%)
    }
    80% {
        transform: translateY(10%);
        opacity: 1;
    }
    90% {
        transform: translateY(-10%);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes button {
    from {
        transform: scale(0, 0)
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes circle2 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bear-home {
    from {
        transform: translateY(pt(-50))
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes rider {
    from {
        transform: translateY(pt(-10))
    }
    to {
        transform: translateY(0);
    }
}

@keyframes smoke {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes title {
    from {
        transform: translateY(pt(-50))
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes hello {
    to {
        opacity: 1;
        transform: scale(2, 2)
    }
}

@keyframes bearmove {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(100%) scale(1.5, 1.5)
    }
}

.garden {
    .glass1 {
        height: pt(20);
    }
    .glass2 {
        opacity: 0;
    }
    .tree {
        opacity: 0;
    }
    .button {
        opacity: 0;
    }
    .bear-home {
        opacity: 0;
        .bear {
            opacity: 1;
        }
        .smoke {
            opacity: 0;
        }
    }
    .title {
        opacity: 0;
    }
    .hello {
        opacity: 0;
    }
}

.garden.animate {
    .glass1 {
        animation: glass1 .5s forwards;
    }
    .glass2 {
        animation: glass2 .5s forwards;
    }
    .tree {
        animation: tree .5s 1s forwards;
    }
    .button {
        animation: button .5s 1.5s forwards;
    }
    .circle2 {
        animation: circle2 .5s 2s linear infinite;
    }
    .bear-home {
        animation: bear-home .5s 2.2s forwards;
        .bear {
            animation: rider .5s 2.2s infinite;
        }
        .smoke {
            animation: smoke .5s 2.2s infinite;
        }
    }
    .title {
        animation: title .5s 2.6s forwards;
    }
    .hello {
        animation: hello .5s 3s forwards;
    }
}

@keyframes h3 {
    from {
        transform: translateX(100%)
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes xian {
    to {
        height: 100%;
    }
}

.swiper-slide {
    .title {
        h3 {
            opacity: 0;
        }
        p {
            opacity: 0;
        }
        div {
            height: 0;
        }
    }
}

.swiper-slide.animate {
    .title {
        h3 {
            animation: h3 0.5s forwards
        }
        p {
            animation: h3 0.5s forwards
        }
        div {
            animation: xian 0.5s 0.5s forwards
        }
    }
}

@keyframes bg {
    0% {
        transform: rotateZ(90deg)
    }
    20% {
        transform: rotateZ(-5deg);
        opacity: 1;
    }
    35% {
        transform: none;
        opacity: 1;
    }
    65% {
        transform: rotateZ(0deg);
        opacity: 1;
    }
    70% {
        transform: rotateZ(5deg);
        opacity: 1;
    }
    100% {
        transform: rotateZ(-90deg);
        opacity: 0;
    }
}

@keyframes stopbg {
    from {
        transform: rotateZ(90deg);
    }
    90% {
        transform: rotateZ(-5deg);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes wod {
    25% {
        transform: translate(5%, 0)
    }
    50% {
        transform: translate(-5%, 5%)
    }
    75% {
        transform: translate(0%, -5%)
    }
    100% {
        transform: translate(5%, -5%)
    }
}

@keyframes paper {
    30% {
        transform: translateX(-75%);
    }
    60% {
        transform: translateX(75%);
    }
    100% {
        transform: none;
    }
}

@keyframes leg2 {
    to {
        transform: none;
    }
}

.swiper-slide.page1 {
    .bg {
        opacity: 0;
        transform-origin: center 200%;
    }
    .person {
        opacity: 0;
        transform-origin: center 200%;
    }
    .info {
        opacity: 0;
        transform-origin: right bottom;
    }
    .leg2 {
        transform-origin: left bottom;
        transform: rotateZ(30deg);
    }
}

.swiper-slide.page1.animate {
    .scroll-page {
        .bg {
            animation: bg 1.5s linear;
        }
        .person {
            animation: bg 1.5s 0.2s linear;
        }
        .info {
            animation: bg 1s 0.4s forwards;
        }
        .paper1 {
            animation: paper 1.5s infinite;
        }
        .paper2 {
            animation: paper 1.5s infinite;
        }
    }
    .scroll-page2 {
        .bg {
            animation: bg 1.5s 1.7s linear;
        }
        .person {
            animation: bg 1.5s 1.9s linear;
        }
        .info {
            animation: bg 1s 2.1s forwards;
        }
        .leg2 {
            animation: leg2 0.5s 2.2s forwards;
        }
    }
    .scroll-page3 {
        .bg {
            animation: stopbg .5s 3.4s forwards;
        }
        .person {
            animation: stopbg .5s 3.6s forwards;
        }
        .info {
            animation: stopbg .5s 3.8s forwards;
        }
        .word1 {
            animation: wod 1s infinite;
        }
        .word2 {
            animation: wod 0.5s infinite;
        }
        .word3 {
            animation: wod 1.2s infinite;
        }
        .word4 {
            animation: wod 0.8s infinite;
        }
    }
}

@keyframes tables {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes page2bear {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cloud {
    from {
        transform: scale(0, 0)
    }
    80% {
        transform: scale(1.2, 1.2);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes hands {
    30% {
        transform: rotateZ(8deg)
    }
    60% {
        transform: rotateZ(-8deg)
    }
    100% {
        transform: none;
    }
}

.swiper-slide.page2 {
    .bg {
        transform-origin: 50% 200%;
        opacity: 0;
    }
    .table {
        opacity: 0;
        .food {
            opacity: 0;
        }
    }
    .bear {
        opacity: 0;
        .cloud1,
        .cloud2 {
            opacity: 0;
        }
        .left {
            transform-origin: left top;
        }
        .right {
            transform-origin: right top;
        }
    }
}

.swiper-slide.page2.animate {
    .bg {
        animation: stopbg .5s forwards;
    }
    .table {
        animation: tables 1.2s .5s forwards;
        .food {
            animation: tables 1.2s 1s forwards;
        }
    }
    .bear {
        animation: page2bear 1.2s 1s forwards;
        .cloud1,
        .cloud2 {
            animation: cloud .5s 2.2s forwards;
        }
        .right {
            animation: hands .5s 1.4s infinite;
        }
        .left {
            animation: hands .5s 1.4s infinite;
        }
    }
}

@keyframes paizi {
    from {
        transform: scale(0, 0);
        opacity: 0;
    }
    80% {
        transform: scale(1.3, 1.3);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes disappear {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.1;
    }
    to {
        opacity: 0;
    }
}

.swiper-slide.page3 {
    .bg {
        opacity: 0;
        transform-origin: 50% 200%;
    }
    .bear {
        opacity: 0;
    }
    .oil,
    .evil,
    .license {
        opacity: 0;
    }
}

.swiper-slide.page3.animate {
    .bg {
        animation: stopbg .5s forwards;
    }
    .bear {
        animation: tables 1.2s .5s forwards;
    }
    .oil,
    .evil,
    .license {
        animation: paizi 1.2s 1s forwards, wod .7s 1.5s infinite;
    }
}

.swiper-slide.page3 {
    .animate-bear-box {
        opacity: 0;
        .bear1 {
            @include bgc('../image/page4/bear3-1-1.png',
            251);
            @include wh(251,
            335);
            bottom: pt(195);
            z-index: 5;
        }
        .bear2 {
            @include bgc('../image/page4/bear3-2-1.png',
            215);
            @include wh(215,
            313);
            bottom: pt(195);
            z-index: 5;
        }
        .bear3 {
            @include bgc('../image/page4/bear3-3-1.png',
            290);
            @include wh(290,
            321);
            bottom: pt(195);
            z-index: 5;
        }
    }
    .tips {
        opacity: 0;
        .oil1 {
            opacity: 0;
            @include bg('../image/page4/oil1.png');
            @include wh(231,
            156);
            bottom: 20.625rem;
            left: 7.03125rem;
        }
        .evil1 {
            opacity: 0;
            @include bg('../image/page4/evil21.png');
            @include wh(211,
            173);
            bottom: 15rem;
            right: 0.9375rem;
        }
        .license1 {
            opacity: 0;
            @include bg('../image/page4/license1.png');
            @include wh(228,
            151);
            bottom: 15.625rem;
            left: 1.25rem;
        }
    }
}

@keyframes card {
    from {
        transform: scale(0, 0)
    }
    80% {
        transform: scale(1.5, 1.5);
        opacity: 1;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes page4cloud {
    0% {
        transform: translateX(-10%);
    }
    80% {
        transform: translateX(10%);
    }
    100% {
        transform: none;
    }
}

@keyframes skipbear {
    0% {
        transform: translateY(pt(10));
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes snowleft {
    0% {}
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(-200%);
        transform: translateY(1000%);
        opacity: 1;
    }
}

@keyframes snowright {
    0% {}
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%);
        transform: translateY(1000%);
        opacity: 1;
    }
}

.swiper-slide.page4.animate {
    .bg {
        animation: stopbg 0.7s linear forwards;
    }
    .card1,
    .card2,
    .card3 {
        animation: card 1s 1s linear forwards;
    }
}

.swiper-slide.page4 {
    .bg {
        opacity: 0;
        transform-origin: 50% 200%;
    }
    .card1,
    .card2,
    .card3 {
        opacity: 0;
    }
}

.swiper-slide.page5 {
    .bg {
        opacity: 0;
        transform-origin: 50% 200%;
    }
    .cloud {
        opacity: 0;
        .snow {
            @include bg('../image/page6/snow-piece.png');
            @include wh(32,
            32);
            left: pt(32);
            bottom: 0;
        }
        .snow:nth-child(1) {
            left: pt(32);
            bottom: 0;
        }
        .snow:nth-child(2) {
            left: pt(32*2);
            bottom: 0;
        }
        .snow:nth-child(3) {
            left: pt(32*3);
            bottom: 0;
        }
        .snow:nth-child(4) {
            left: pt(32*4);
            bottom: 0;
        }
        .snow:nth-child(5) {
            left: pt(32*5);
            bottom: 0;
        }
        .snow:nth-child(6) {
            left: pt(32*6);
            bottom: 0;
        }
        .snow:nth-child(7) {
            left: pt(32*7);
            bottom: 0;
        }
        .snow:nth-child(8) {
            left: pt(32*8);
            bottom: 0;
        }
    }
    .bear {
        opacity: 0;
        .shadow {
            opacity: 0;
        }
    }
}

.swiper-slide.page5.animate {
    .bg {
        animation: stopbg .7s linear forwards;
    }
    .cloud {
        animation: card 1s 1s linear forwards, page4cloud 0.8s 1s infinite;
        .snow:nth-child(1) {
            animation: snowleft 0.5s 1.1s infinite;
        }
        .snow:nth-child(2) {
            animation: snowright 0.5s 1.1s infinite;
        }
        .snow:nth-child(3) {
            animation: snowleft 0.8s 1.1s infinite;
        }
        .snow:nth-child(4) {
            animation: snowright 0.8s 1.1s infinite;
        }
        .snow:nth-child(5) {
            animation: snowleft 1s 1.1s infinite;
        }
        .snow:nth-child(6) {
            animation: snowright 1s 1.1s infinite;
        }
        .snow:nth-child(7) {
            animation: snowleft 1.3s 1.1s infinite;
        }
        .snow:nth-child(8) {
            animation: snowright 1.5s 1.1s infinite;
        }
    }
    .bear {
        animation: skipbear 0.5s 1.2s infinite;
        .shadow {
            animation: smoke .5s 1.2s infinite;
        }
    }
}

@keyframes giftbox {
    from {
        transform: none;
    }
    to {
        opacity: 1;
    }
}

@keyframes giftboxmove {
    to {
        transform: rotate(360deg) // transform: rotate(360)
    }
}

@keyframes smallgift {
    to {
        transform: scale(0, 0);
    }
}

.swiper-slide.page6 {
    .bg {
        opacity: 0;
        transform-origin: 50% 200%;
    }
    .gift-box>div {
        opacity: 0;
    }
}

.swiper-slide.page6.animate {
    .bg {
        animation: stopbg .7s linear forwards;
    }
    .gift-box>div {
         animation: giftbox 2s forwards;
    }
    @for $i from 1 through 12 {
    .gift-box>div:nth-child(#{$i})>div {
        animation: giftboxmove 1s 3;
    } 
}
}



.control{
    @include wh(36,36);
    background: url('../image/play.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: pt(32);
    right: pt(32);
    z-index: 10;
}

